<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--本地下载:  先下载  在引入  再使用 -->
    <script src="../js/vue.js"></script>

    <!-- CDN -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
</head>
<body>
    <!-- 在没有使用vue之前 -> 它就是一个普通的文本 -->
    <div id="app">
        <p>
            message:{{message}} 
        </p>
        <p>
            count: {{count}}
        </p>
        <p>
            say:{{say()}}
        </p>
    </div>
</body>
<script>
    // ajax({type,url,data,async,success})  传入一个对象作为参数(同时传入多个数据,不同的键名执行不同的代码逻辑)
</script>
<script>
  
    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

    
    //  插值  -> 文本插值 (将{{}}中的内容(执行的结果)插入到标签内,作为标签内的文本 => 拼接)
    //  {{message}} 
    
    // 注意:
    // 1. Vue中的绝大部分功能都是依赖于options(选项)参数实现的
    // 2. 挂载的数据,和挂载的方法 最终也会在实例化对象上绑定一份 => 模板数据上能访问数据和方法本质上都是通过vue实例访问的  (挂载的的数据和方法才能在模板语法语法中使用,如果不挂载直接用 -> 报错)

    
    
    // 声明式渲染 ->  在创建vue实例(应用)的过程中,将Vue实例中的内容渲染到绑定的元素中
    // new Vue(options)    创建一个Vue实例(应用)
    
    var vm = new Vue({   // 注意Vue中的绝大部分功能都是依赖于options(选项)参数实现的
        el:"#app",  //挂载的元素(css选择器)  => #app
        data:{      //挂载的数据  => 可以有多条(对象) -> 可以在挂载的元素内使用(对应数据名称使用)
            count:1,
            message:"hello world",
            msg:"你好"
        },
        methods:{   // 挂载的方法 => 执行既定的内容  -> 可以在挂载的元素内使用(对应函数名称使用)
            say:function(){
                console.log("this",this);  // 在Vue实例中methods,computed,watch,声明周期钩子函数中 方法的this都指向当前Vue实例
                // return "你好"
                return this.msg;
            }, 
        }
    })

    console.log(vm); //打印创建的vue实例(实例化对象)

    console.log(vm.$el); // 查看挂载的元素
    console.log(vm.$data);  // 查看挂载的数据
    console.log(vm.count);  // 对应属性名查看挂载的数据
    console.log(vm.message);  // 对应属性名查查看挂载的数据
    console.log(vm.say);  // 对应属性名查查看挂载的数据





</script>
</html>